<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Complex Layout - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../Css/easyui.css">
    <link rel="stylesheet" type="text/css" href="../Css/icon.css">
    <link rel="stylesheet" type="text/css" href="../Css/demo.css">
    <script type="text/javascript" src="../JavaScript/jquery.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" data-options="fit:true">;
    <div data-options="region:'north'" style="height:100px;background-color:skyblue;overflow:visible">
        <p style="line-height:100px;font-size:30px;color:white;margin:0;padding:0;">后台管理系统</p>
    </div>
    <div data-options="region:'south',split:true" style="height:50px;background-color:skyblue"></div>
    <div data-options="region:'west',split:true" title="West" style="width:200px;">
        <div class="easyui-accordion" data-options="fit:true">
            <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-man"><a href="javascript:void(0)" data-icon="icon-edit" data-link="layout-1.html" iframe="1">用户管理</a>
                    </li>
                    <li iconCls="icon-large-chart"><a href="javascript:void(0)" data-icon="icon-print" data-link="layout-2.html" iframe="1">分类管理</a>
                    </li>
                    <li iconCls="icon-large-shapes"><a href="javascript:void(0)" data-icon="icon-reload" data-link="layout-3.html" iframe="1">新闻管理</a>
                    </li>
                </ul>
            </div>
            <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;">
                <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
            <div title="首页" data-options="href:'layout-home.html',closable:false,iconCls:'icon-tip',cls:'pd3'">
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    $(function(){
        $('.wu-side-tree a').bind("click",function(){
            var title = $(this).text();
            var url = $(this).attr('data-link');
            var iconCls = $(this).attr('data-icon');
            var iframe = $(this).attr('iframe')==1?true:false;
            addTab(title,url,iconCls,iframe);
        });
    });
    // iframe 0,1
    function addTab(title, href, iconCls, iframe){
        var tabPanel = $('#wu-tabs');
        if(!tabPanel.tabs('exists',title)){
            var content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:100%;height:100%;"></iframe>';
            // iframe模式
            if(iframe){
                tabPanel.tabs('add',{
                    title:title,
                    content:content,
                    iconCls:iconCls,
                    fit:true,
                    cls:'pd3',
                    closable:true
                });
            }
            else{
                tabPanel.tabs('add',{
                    title:title,
                    href:href,
                    iconCls:iconCls,
                    fit:true,
                    cls:'pd3',
                    closable:true
                });
            }
        }
        else
        {
            tabPanel.tabs('select',title);
        }
    }
</script>